import {
  LogoutOutlined,
  SettingOutlined,
  UserOutlined,
  KeyOutlined,
} from '@ant-design/icons'
import { Avatar, Menu, Spin } from 'antd'
import React from 'react'
import { history, connect } from 'umi'
import HeaderDropdown from '../HeaderDropdown/index'
import ModifyPwd from './ModifyPwd'
import styles from './index.less'

class AvatarDropdown extends React.Component {
  onMenuClick = event => {
    const { key } = event

    if (key === 'logout') {
      const { dispatch } = this.props

      if (dispatch) {
        dispatch({
          type: 'global/logout',
        })
      }
    }
  }

  render() {
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
    } = this.props
    const menuHeaderDropdown = (
      <Menu
        className={styles.menu}
        selectedKeys={[]}
        onClick={this.onMenuClick}
      >
        {/*{menu && (*/}
        {/*<Menu.Item key="center">*/}
        {/*<UserOutlined />*/}
        {/*个人中心*/}
        {/*</Menu.Item>*/}
        {/*)}*/}
        {/*{menu && (*/}
        {/*<Menu.Item key="settings">*/}
        {/*<SettingOutlined />*/}
        {/*个人设置*/}
        {/*</Menu.Item>*/}
        {/*)}*/}
        {/*{menu && <Menu.Divider />}*/}
        <Menu.Item key="modifyPwd">
          <ModifyPwd>
            {show => (
              <div onClick={show}>
                <KeyOutlined />
                修改密码
              </div>
            )}
          </ModifyPwd>
        </Menu.Item>
        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    )
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
    return (currentUser && currentUser.adminName) || userInfo.adminName ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar
            size="small"
            icon={<UserOutlined />}
            // className={styles.avatar}
            src={currentUser.avatar}
            alt="avatar"
          />
          <span className={styles.name}>{userInfo.adminName}</span>
        </span>
      </HeaderDropdown>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    )
  }
}

export default connect(({ global }) => ({
  currentUser: global.currentUser,
}))(AvatarDropdown)
